import { isEqual } from "lodash";
import React, { useState } from "react";
// useState 基本数据类型值相等时候 修改不会触发render; useState 修改是异步操作
// this.setState 基本数据类型值相等时候 修改会触发render
// React.memo 会对传入的props进行浅比较，相等就不触发render
const Son = React.memo(
    function (props) {
        console.log("子组件渲染了");
        return (
            <div>
                Son
                <p>父组件来的count: {props.count}</p>
            </div>
        );
    },
    (prevProps, nextProps) => {
        console.log(prevProps.obj.name, nextProps.obj.name);
        if (isEqual(prevProps, nextProps)) {
            return true; // true是不渲染
        }
        return false; // false是渲染
    }
);
class App extends React.Component {
    state = {
        name: "传智",
        count: 0,
        obj: { name: "传智播客" },
    };
    render() {
        return (
            <div>
                <p>count: {this.state.count}</p>
                <p>name: {this.state.name}</p>
                <p>obj.name: {this.state.obj.name}</p>
                <button
                    onClick={() => {
                        this.setState({
                            count: this.state.count + 1,
                        });
                    }}>
                    count + 1
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            name: this.state.name,
                        });
                    }}>
                    setName
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            obj: { name: "传智播客" },
                        });
                    }}>
                    setObjName
                </button>
                <hr />
                <Son count={this.state.count} obj={this.state.obj}></Son>
            </div>
        );
    }
}

export default App;
